<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
<script>
  console.log(1);
</script>
<script type=module src="es.js"></script>
<!--<script nomodule src="./fallback.js"></script>--> <!--对于支持type=module的浏览器，会忽略指定nomodule属性的标签。从而对于不支持es module的浏览器提供一种回退的方案-->
<script>
  console.log(3);
  /** 你会发现打印顺序为 1 3 2,因为type=module的脚本是defer的 */
</script>
<!-- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules
1. 你需要注意本地测试 —  如果你通过本地加载Html 文件 (比如一个 file:// 路径的文件), 你将会遇到 CORS 错误,因为Javascript 模块安全性需要。你需要通过一个服务器来测试。

2. 另请注意,您可能会从模块内部定义的脚本部分获得不同的行为,而不是标准脚本。 这是因为模块自动使用【严格模式】。

3. 加载一个模块脚本时不需要使用 defer 属性 (see <script> attributes) 模块会自动【延迟加载】。

4. 最后一个但不是不重要，你需要明白模块功能导入到单独的脚本文件的范围 — 他们无法在全局获得(参看 `./es.js`)(作为模块加载的脚本不会像普通的 script 脚本一样污染全局作用域。)。因此，你只能在导入这些功能的脚本文件中使用他们，你也无法通过Javascript console 中获取到他们，比如，在DevTools 中你仍然能够获取到语法错误，但是你可能无法像你想的那样使用一些debug 技术
-->
</body>
</html>
